<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
</head>
<body>
	<div id="demo">
		<button v-on:click="show = !show">Toggle</button>
		<transition name="fade">
			<p v-if="show">Hello</p>
		</transition>
	</div>

	<style>
		.fade-enter-actvie, .fade-leave-active{
			transition:  opacity .5s;
		}
		.fade-enter, .fade-leave-active{
			opacity: 0;
		}
	</style>

	<script>
		new Vue({
			el:'#demo',
			data:{
				show:true
			},
		})
	</script>

	<hr>

	<div id="example-1">
		<button @click="show = !show">Toggle render</button>
		<transition name="slide-fade">
			<p v-if="show">Hello</p>
		</transition>
	</div>
	
	<style>
		.slide-fade-enter-active{
			transition: all .3s ease;
		}
		.slide-fade-leave-active{
			transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
		}
		.slide-fade-enter, .slide-fade-leave-active{
			transform: translateX(10px);
			opacity: 0;
		}
	</style>
	<script>
		new Vue({
			el:'#example-1',
			data:{
				show:true
			}
		})
	</script>
</body>
</html>